<template>
	<div>
		<Breadcrumb></Breadcrumb>
		<div class="box">
			<div class="left">
				<div class="selectBox">
					<div v-for="(item, i) in carMood" :key="i" style="padding-bottom: 8px;">
						<div :class="cont == i ? 'selectItem1' : 'selectItem'" @click="getDetails(item, i)">
							<el-image class="carPic" :src="item.image">
							</el-image>
							<span class="title">{{ item.name }}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="right">
				<div class="title">
					{{ formdata.vehicleModel }}
				</div>
				<div class="controlBox">
					<div class="ButtonGroup">
						<el-radio-group v-model="radioValue" @input="changeRadioSelect">
							<el-radio-button label="基本费用" border></el-radio-button>
							<el-radio-button label="凌晨服务费" border></el-radio-button>
							<el-radio-button label="等候费" border></el-radio-button>
						</el-radio-group>
					</div>
					<div class="controlRight">
						<!-- <div class="searchInputBox">
							<input class="searchInput" type="text">
							<button class="searchBtn">
								<i class="el-icon-search iconStyle"></i>
							</button>
						</div> -->
						<button class="addBtn" @click="showBasicDialog()" v-if="permissions.addBillingRules.perms != null">
							<i class="el-icon-plus iconBtn"></i>
							<span>添加</span>
						</button>
						<!-- <button class="addBtn" style="margin-right:0px" v-if="radioValue == '基本费用'">
						<span>批量编辑</span>
					</button> -->
					</div>
				</div>
				<div class="changeArea">
					<div class="list">

						<el-table :data="records" style="width: 100%" @selection-change="handleSelectionChange" ref="table"
							:default-sort="{ prop: 'date', order: 'descending' }" header-align="center"
							:row-style="{ color: '#595959', fontSize: '12px' }">
							<el-table-column key="1" align="center" type="selection" width="50"></el-table-column>
							<el-table-column align="center" prop="SerialNumber" width="80" label="序号">
								<template slot-scope="scope">
									{{ scope.$index + 1 }}
								</template>
							</el-table-column>
							<el-table-column key="2" align="center" label="城市/地区" width="500" v-if="radioValue == '基本费用'">
								<template slot-scope="scope">
									<div style="display: flex;flex-wrap: wrap;">
										<div v-for="(item, i) in scope.row.addr" :key="i">
											{{ item.label }},
										</div>
									</div>

								</template>
							</el-table-column>
							<el-table-column key="3" align="center" prop="startPrice" label="起步价" width="80"
								v-if="radioValue == '基本费用'">
							</el-table-column>
							<el-table-column key="4" align="center" prop="" label="阶梯里程计费" v-if="radioValue == '基本费用'">
								<template slot-scope="scope">
									<div style="display: inline-block;">
										<div style="display:flex">
											<div v-for="(item, i) in scope.row.list" :key="i" style="margin-right: 8px;">
												<div>{{ item.price }}元/{{ scope.row.priceType == '里程' ? '公里' : '小时' }}
												</div>
												<div>
													({{ item.beginType }}~{{ item.endType }}{{ scope.row.priceType == '里程' ?
														'公里' :
														''
													}})
												</div>
											</div>
										</div>
									</div>
								</template>
							</el-table-column>
							<template v-if="radioValue == '凌晨服务费'">
								<el-table-column key="5" align="center" prop="beginTime" label="开始时间">
									<template slot-scope="scope">
										<div>{{ scope.row.beginTime == null ? '' : scope.row.beginTime.slice(11) }}</div>
									</template>
								</el-table-column>
							</template>
							<template v-if="radioValue == '凌晨服务费'">
								<el-table-column key="6" align="center" prop="endTime" label="结束时间">
									<template slot-scope="scope">
										<div>{{ scope.row.endTime == null ? '' : scope.row.endTime.slice(11) }}</div>
									</template>
								</el-table-column>

							</template>
							<template v-if="radioValue == '凌晨服务费'">
								<el-table-column key="7" align="center" prop="price" label="价格（起步价）">
								</el-table-column>
							</template>
							<el-table-column key="8" align="center" prop="waitTime" label="免费等候时间"
								v-if="radioValue == '等候费'">
								<template slot-scope="scope">
									{{ scope.row.waitTime }}分钟
								</template>
							</el-table-column>
							<el-table-column key="9" align="center" prop="waitPrice" label="超出时间收费"
								v-if="radioValue == '等候费'">
								<template slot-scope="scope">
									{{ scope.row.waitPrice }}元/每超出1分钟
								</template>
							</el-table-column>
							<el-table-column align="center" label="操作">
								<template slot-scope="scope">
									<div>
										<el-button type="text" size="small" @click="Editing(scope.row)"
											v-if="permissions.modifyBillRulesByBid.perms != null">编辑</el-button>
										<el-button type="text" size="small" @click="Delete(scope.row.bid)"
											v-if="permissions.deleteBillRulesByBid.perms != null">删除</el-button>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<div class="paginationBox">
						<!-- radioValue -->
						<el-pagination @current-change="changePages($event, radioValue)" class="pagination" background
							layout="slot,prev, pager, next"
							:current-page="formdata.btype == '0' ? pageCurrent1 : formdata.btype == '1' ? pageCurrent2 : pageCurrent3"
							:total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
							<template slot>
								<span style="
                color: #686868;
                font-size: 12px;
                margin-right: 20px;
                display: inline-block;
              ">
									共{{ data.total }}条,每页{{ data.size }}条
								</span>
							</template>
						</el-pagination>
					</div>
				</div>
			</div>
		</div>


		<el-dialog class="dialog" :title="editing == 1 ? '添加' + radioValue : '编辑' + radioValue"
			:visible.sync="visibleBasicBox" width="1000px">
			<el-form ref="formdata" :model="formdata" :rules="formdataRules" label-width="110px">
				<el-row>
					<div v-if="radioValue == '基本费用'">
						<el-col :span="24">
							<el-form-item label="城市/地区" prop="addr" class="roleSelectBox">
								<el-cascader size="small" style="width: 100%;" v-model="cityValue" :options="cityArrData"
									:props="props" clearable @change="locationChange($event)"
									ref="sysCascader"></el-cascader>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="阶梯计费类型" prop="priceType">
								<el-select size="small" v-model="formdata.priceType" placeholder="请选择">
									<el-option v-for="item in StepfeeTypeArr" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="起步价" prop="startPrice">
								<el-input size="small" placeholder="请输入内容" v-model="formdata.startPrice"
									onkeyup="value=value.replace(/[^\d.]/g,'')">
									<template slot="append">元</template>
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="阶梯计费" class="redDian">
								<el-form :model="stepChargingForm" ref="stepChargingForm">
									<el-table class="discountTable" :data="stepChargingForm.stepChargingList"
										:header-cell-style="tableHeaderStyle" :row-class-name="rowStyle"
										:header-row-style="{ height: '40px' }" :row-style="{ height: '48px' }">
										<el-table-column prop="serialNumber" label="序号" width="50">
											<template slot-scope="scope">
												<div>
													{{ scope.$index + 1 }}
												</div>
											</template>
										</el-table-column>
										<!-- 里程范围 -->
										<el-table-column>
											<template slot="header">
												<div class="beforeRedDian">
													<span>{{ formdata.priceType == '里程' ? '里程范围' : '时间范围' }}</span>
													<span class="iconfont_color2 icon-xiaoyudengyu"></span>
												</div>
											</template>
											<template slot-scope="scope">
												<!-- 阶梯计费  里程范围区间开始 -->
												<div class="qujianStyle">
													<el-form-item :prop="'stepChargingList.' + scope.$index + '.beginType'"
														:rules="stepChargingRules.beginRules">
														<el-input placeholder="请输入" size="small" class="tableInputStyle"
															v-if="formdata.priceType == '里程'"
															v-model="stepChargingForm.stepChargingList[scope.$index].beginType"
															onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
														<!-- <el-date-picker v-else v-model="scope.row.beginType"
															value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
															placeholder="选择日期时间"></el-date-picker> -->
													</el-form-item>
													<span style="margin:0 10px">至</span>
													<el-form-item :prop="'stepChargingList.' + scope.$index + '.endType'"
														class="tableInputStyle" :rules="stepChargingRules.endRules">
														<el-input placeholder="请输入" size="small"
															v-model="stepChargingForm.stepChargingList[scope.$index].endType"
															v-if="formdata.priceType == '里程'"
															onkeyup="value=value.replace(/[^\d]/g,'')"></el-input>
														<!-- <el-date-picker v-model="scope.row.endType" size="small"
															value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
															placeholder="选择日期时间" v-else></el-date-picker> -->
													</el-form-item>
												</div>
											</template>
										</el-table-column>

										<!-- 价格每公里 -->
										<el-table-column align="center">
											<template slot="header">
												<div class="beforeRedDian">
													<span>{{ formdata.priceType == '里程' ? '价格/每公里' : '价格/每分钟' }}</span>
												</div>
											</template>
											<!-- 阶梯计费  区间价格 -->
											<template slot-scope="scope">
												<el-form-item :prop="'stepChargingList.' + scope.$index + '.price'"
													:rules="stepChargingRules.priceRules">
													<el-input placeholder="请输入" size="small"
														v-model="stepChargingForm.stepChargingList[scope.$index].price"
														onkeyup="value=value.replace(/[^\d.]/g,'')"></el-input>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column align="center" label="操作" width="60">
											<template slot-scope="scope">
												<i class="iconfontcolor icon-a- commonStyle" @click="addTable"
													v-show="scope.$index == 0"></i>
												<i class="iconfontcolor icon-a-- commonStyle" @click="delit(scope.$index)"
													v-show="scope.$index > 0"></i>
											</template>
										</el-table-column>
									</el-table>
								</el-form>

							</el-form-item>
						</el-col>
					</div>
					<div v-else-if="radioValue == '凌晨服务费'">
						<el-col :span="14">
							<el-form-item label="时间范围" prop="TimeRange">
								<el-time-picker is-range v-model="formdata.TimeRange" range-separator="至" format="HH:mm:ss"
									value-format="HH:mm:ss" start-placeholder="开始时间" end-placeholder="结束时间"
									placeholder="选择时间范围">
								</el-time-picker>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="阶梯计费类型" prop="priceType">
								<el-select v-model="formdata.priceType" placeholder="请选择" size="small">
									<el-option v-for="item in StepfeeTypeArr" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="价格" prop="price">
								<el-input placeholder="价格/每公里" v-model="formdata.price" size="small"></el-input>
							</el-form-item>
						</el-col>
					</div>
					<div v-else>
						<el-col :span="14">
							<el-form-item label="免费等待时间" prop="waitTime">
								<el-input placeholder="" v-model="formdata.waitTime" size="small"><template
										slot="append">分钟</template></el-input>

							</el-form-item>
						</el-col>
						<el-col :span="14">
							<el-form-item label="超出时间收费" prop="waitPrice" size="small">
								<el-input placeholder="价格/每超出1分钟" v-model="formdata.waitPrice"></el-input>
							</el-form-item>
						</el-col>
					</div>
					<el-col :span="24" style="display: flex;justify-content: flex-end;">
						<el-button class="cancelBtn" @click="visibleBasicBox = false">取 消</el-button>
						<el-button class="submitBtn" type="primary" @click="BasicSubmit('formdata')">确 定</el-button>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import newCity from '@/common/newCity'
import Breadcrumb from '@/components/breadcrumb.vue'
import httpApi from '@/http';

export default {

	data() {

		let beginTypeRules = (rule, value, callback) => {
			console.log(rule);

			let regular = /^([1-9]\d*|0)$/
			if (value == '') {
				callback(new Error('开始里程不能为空'))
			}
			else if (!regular.test(value)) {
				callback(new Error('里程格式错误'))
			} else {
				callback()
			}
		};
		let endTypeRules = (rule, value, callback) => {
			let regular = /^([1-9]\d*)$/
			if (value == '') {
				callback(new Error('结束里程不能为空'))
			}
			else if (!regular.test(value)) {
				callback(new Error('里程格式错误'))
			} else {
				callback()
			}
		};
		let priceRules = (rule, value, callback) => {
			let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/
			value = value.toString()
			console.log('价格', value);
			if (value == '') {
				callback(new Error('价格不能为空'))
			} else if (value.split('.').length > 2) {
				callback('只能有一个小数点')
			} else if (!regular.test(value)) {
				callback(new Error('请输入正确价格'))
			} else {
				callback()
			}
		};
		let startPriceRules = (rule, value, callback) => {
			let regular = /^([1-9]\d*(\.\d*[1-9][0-9])?)|^(0\.\d*[1-9][0-9])$|^(0\.\d*[1-9])$/
			value = value.toString()
			console.log('起步价', value);
			if (value == '') {
				callback(new Error('起步价不能为空'))
			} else if (value.split('.').length > 2) {
				callback('只能有一个小数点')
			} else if (!regular.test(value)) {
				callback(new Error('请输入正确起步价'))
			} else {
				callback()
			}
		};
		return {
			activeName: "",
			radioValue: "基本费用", //选择值 切换显示
			dialogOne: "", //基本服务费 添加对话框

			dialogTwo: "", //凌晨服务费 添加对话框
			dialogThree: "", //等候费 添加对话框
			searchValue: "",
			data: {
				total: "",
				size: "",
			},
			pageCurrent1: 1, //当前页   //基本费用分页数据
			pageSize1: 10, //每页10条
			pageCurrent2: 1, //当前页 //凌晨服务
			pageSize2: 10, //每页10条
			pageCurrent3: 1, //当前页 等候费
			pageSize3: 10, //每页10条
			records: [],



			// 添加对话框的表单
			visibleBasicBox: false,
			cityValue: [], //城市地区 value
			cityArrData: [], //城市数据arr
			props: {
				multiple: true
			}, //multipl为ture多选
			StepfeeTypeValue: "里程", //阶梯计费类型 绑定Value
			StepfeeTypeArr: [
				{
					label: '里程',
					value: '里程'
				},
			], //阶梯计费类型 数据
			StepTable: [{

			}],
			visibleBeforeDawnBox: false,
			visibleWaitBox: false,

			value1: '',

			cont: 0,
			carMood: [],
			categoryId: '',
			// 阶梯计费表单
			isStepTrue: false,
			stepChargingForm: {
				stepChargingList: [{ beginType: '', endType: '', price: '' }]
			},
			stepChargingRules: {
				beginRules: [{
					validator: beginTypeRules,
					trigger: 'blur',
				}],
				endRules: [{
					validator: endTypeRules,
					trigger: 'blur',
				}],
				priceRules: [{
					validator: priceRules,
					trigger: 'blur',
				}]
			},


			formdata: {
				addr: '', //城市地区
				bid: '',//主键Id 添加不传
				btype: '0',//0基本费用1凌晨服务费2等候费
				createBy: '',//创建人
				createTime: '',//创建时间
				vehicleModel: '',//车型
				list: [],
				price: '',//价格/每公里
				priceType: '里程',//阶梯计费类型
				startPrice: '',//起步价
				waitPrice: '',//等待时间收费
				waitTime: '',//免费等待时间
				TimeRange: ['00:00:00', '06:00:00']
			},
			formdataRules: {
				addr: [{ required: true, message: '请选择城市/地区', trigger: 'change' }],
				priceType: [{ required: true, message: '请选择阶梯计费类型', trigger: 'blur' }],
				TimeRange: [{ required: true, message: '请选择时间范围', trigger: 'change' }],
				startPrice: [{ required: true, validator: startPriceRules, trigger: 'blur', }],
				price: [{ required: true, message: '请输入价格', trigger: 'blur' }],//凌晨服务费的价格
				waitTime: [{ required: true, message: '请输入免费等待时间', trigger: 'blur' }],
				waitPrice: [{ required: true, message: '请输入超出时间收费', trigger: 'blur' }],
			},
			editing: '1',//是否编辑
			permissions: {},
			loading: false,
		}
	},

	methods: {
		formatter(row, column) {
			// return row.address;
		},
		tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
			return 'font-size:12px;fontWweight:bold;color:#262626;backgroundColor:#F5F5F5;borderColor:#DDDDDD;height:40px;paddingTop:0px;paddingBottom:0px;'
		},
		rowStyle({ row, rowIndex }) {
			return 'tableRowStyleName'
		},
		changePages(val, radioValue) {
			switch (radioValue) {
				case '基本费用':
					this.pageCurrent1 = val
					break;
				case '凌晨服务费':
					this.pageCurrent2 = val
					break;
				case '等候费':
					this.pageCurrent3 = val
					break;
			}
			this.cread1()
			console.log()
		},
		// 获取车型数据
		async cread() {
			let res = await this.$http.SettlementDocApi.get_vehicle_model_list()
			this.carMood = res.data.data.homeVehicleModelVoList
			this.formdata.vehicleModel = this.carMood[0].name
			this.cread1()
		},

		async cread1() {
			let params = {
				btype: this.formdata.btype,
				vehicleModel: this.formdata.vehicleModel,//	// btype: '0',//0基本费用1凌晨服务费2等候费
				current: this.formdata.btype == '0' ? this.pageCurrent1 : this.formdata.btype == '1' ? this.pageCurrent2 : this.pageCurrent3,//传对应表格的分页数据
				size: this.formdata.btype == '0' ? this.pageSize1 : this.formdata.btype == '1' ? this.pageSize2 : this.pageSize3,
			}
			let res = await this.$http.vehicleApi.queryBillingRules(params)
			let mood = res.data.data.records
			this.data = res.data.data

			mood.forEach(item => {
				if (item.addr != '') {
					item.addr = JSON.parse(item.addr)
				}
			})

			this.records = JSON.parse(JSON.stringify(mood))
		},
		//编辑回填
		async Editing(e) {
			this.editing = 2
			if (this.radioValue == '基本费用') {
				this.formdata.btype = 0
			} else if (this.radioValue == '凌晨服务费') {
				this.formdata.btype = 1
			} else {
				this.formdata.btype = 2
			}
			this.formdata.bid = e.id
			let res = await this.$http.vehicleApi.queryBillingRulesByBid({ btype: this.formdata.btype, bid: e.bid, vehicleModel: this.formdata.vehicleModel })
			for (let k in res.data.data) {
				this.formdata[k] = res.data.data[k]
			}
			this.visibleBasicBox = true  //显示弹窗
			if (this.radioValue == '基本费用') {
				this.formdata.addr = JSON.parse(this.formdata.addr)
				let mood = JSON.parse(JSON.stringify(this.formdata.addr))
				this.cityValue = []
				mood.forEach(item => {
					this.cityValue.push((item.id).split(','))
				})  //回填城市
				this.stepChargingForm.stepChargingList = res.data.data.list  //回填阶梯计费
			} else if (this.radioValue == '凌晨服务费') {
				this.TimeRange = [res.data.data.beginTime.slice(11), res.data.data.endTime.slice(11)]
				this.formdata.price = res.data.data.price
				this.formdata.priceType = res.data.data.priceType
			} else if (this.radioValue == '等候费') {
				this.formdata.waitTime = res.data.data.waitTime
				this.formdata.waitPrice = res.data.data.waitPrice
			}
		},
		//删除
		Delete(bid) {
			let that = this
			if (this.radioValue == '基本费用') {
				this.formdata.btype = 0
			} else if (this.radioValue == '凌晨服务费') {
				this.formdata.btype = 1
			} else {
				this.formdata.btype = 2
			}


			this.$confirm('是否删除该条计费规则?', '确认删除', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let params = { btype: that.formdata.btype, bid: bid, vehicleModel: that.formdata.vehicleModel }
				that.$http.vehicleApi.deleteBillRulesByBid(params).then(res => {
					if (res.data.code == 200) {
						that.$message.success('删除成功')
						that.cread1()
					}
				})
			}).catch(() => {
				that.$message.success('取消删除')
			});
		},
		locationChange(val) {
			let name = []
			this.cityArrData.forEach(item => {
				val.forEach(res => {
					res.forEach(res1 => {
						if (res1 == item.value) {
							name.push({ label: item.label, id: res1 })
							item.children.forEach(item1 => {
								res.forEach(res2 => {
									if (res2 == item1.value) {
										name.forEach(names => {
											if (names.id == res1) {
												names.label = names.label + '/' + item1.label
												names.id = names.id + ',' + res2
											}
										})
										if (item1.children) {
											item1.children.forEach(item2 => {
												res.forEach(res3 => {
													if (res3 == item2.value) {
														name.forEach(names => {
															if (names.id == res1 + ',' + res2) {
																names.label = names.label + '/' + item2.label
																names.id = names.id + ',' + res3
															}
														})
													}
												})
											})
										}
									}
								})
							})
						}
					})

				})
			})
			this.formdata.addr = JSON.stringify(name)
			console.log(name)
		},
		handleClick(tab, event) {
			console.log(tab, event);
		},
		changeRadioSelect(val) {
			if (val == '凌晨服务费') {
				this.formdata.btype = 1
			} else if (val == '等候费') {
				this.formdata.btype = 2
			} else {
				this.formdata.btype = 0
			}
			this.cread1()
		},
		// 表格里 多选列表中数据 变化事件
		handleSelectionChange() {

		},
		// 选择车型
		getDetails(e, i) {
			//选择车辆发送对应车辆数据请求
			this.cont = i
			this.categoryId = e.categoryId
			this.formdata.vehicleModel = e.name
			this.cread1()


		},
		showBasicDialog() {
			this.editing = '1'  //代表添加
			this.visibleBasicBox = true
		},

		addTable() {
			this.stepChargingForm.stepChargingList.push({ beginType: '', endType: '', price: '' })
		},
		delit(index) {
			this.stepChargingForm.stepChargingList.splice(index, 1)
		},
		mileageVerify() {
			//后端区间含等于 例如 100<=200 200<=300 300以上
			this.$refs['stepChargingForm'].validate((valid) => {
				if (valid) {//判断表单是否填写且通过正则规则

					// 优惠券类型为折扣券 且为阶梯式折扣券  判断区间运费 折扣 是否为从小到大 排序
					try {
						this.stepChargingForm.stepChargingList.forEach((item, index) => {
							if (index + 1 != this.stepChargingForm.stepChargingList.length) {
								let nextItem = this.stepChargingForm.stepChargingList[index + 1]
								if (Number(item.price) > Number(nextItem.price)) {//区间1  大于 区间2 折扣 则报错

									console.log('价格请根据区间从小到大填写');
									this.isStepTrue = false
									this.loading = false
									throw new Error("价格请根据区间从小到大填写");
								}

								if (Number(item.endType) != Number(nextItem.beginType)) {//一区间输入框结束值 ==二区间输入框起始值  才连续

									console.log('阶梯里程区间运费需连续');
									this.isStepTrue = false
									this.loading = false
									throw new Error("阶梯里程区间运费需连续");

								}
							}

							if (Number(item.beginType) > Number(item.endType) || Number(item.beginType) == Number(item.endType)) {
								// this.$message.error('请从小到大填写区间运费')
								console.log('请从小到大填写里程区间');
								this.isStepTrue = false
								this.loading = false
								throw new Error("请从小到大填写里程区间");

							}

						})
						this.isStepTrue = true

					} catch (e) {
						this.$message.error(e)
					}
				} else {
					this.$message.error('请填写完整信息')
					this.loading = false
					this.isStepTrue = false
					return false;
				}
			})

		},
		resettingForm() {
			switch (this.radioValue) {
				case '基本费用':
					this.stepChargingForm.stepChargingList = [{ beginType: '', endType: '', price: '' }]
					this.formdata.addr = []
					this.formdata.priceType = ''
					this.formdata.startPrice //起步价
					break;
				case '凌晨服务费':
					this.formdata.priceType = ''
					this.formdata.price = ''
					break;
				case '等候费':

					break;
			}
		},
		resetForm(formName) {
			// this.$refs[formName].resetFields();
		},



		//添加对话框的3种确定 事件
		BasicSubmit(formName) {
			if (this.loading) {
				this.$message('正在提交中,请勿频繁点击')
				return
			}
			this.loading = true
			console.log(this.editing);
			if (this.radioValue == '基本费用') {
				this.mileageVerify() //阶梯计费  里程区间填写验证
				//   isStepTrue为True代表通过验证 
				if (this.isStepTrue == false) {//false未通过 就不执行后续代码
					return
				}
			}
			this.$refs[formName].validate((valid) => {
				if (valid) {
					let params = {}
					// 根据不同费用  分别设置传参
					switch (this.radioValue) {
						case '基本费用':
							this.formdata.list = this.stepChargingForm.stepChargingList
							params = {
								btype: '0',
								vehicleModel: this.formdata.vehicleModel,
								list: this.stepChargingForm.stepChargingList,//阶梯计费区间
								addr: this.formdata.addr,//城市城区
								priceType: this.formdata.priceType, //阶梯计费类型
								startPrice: this.formdata.startPrice //起步价
							}
							break;
						case '凌晨服务费':
							let startTime = this.formdata.TimeRange != null ? '1988-01-01 ' + this.formdata.TimeRange[0] : ''
							let endTime = this.formdata.TimeRange != null ? '1988-01-01 ' + this.formdata.TimeRange[1] : ''
							params = {
								btype: '1',
								vehicleModel: this.formdata.vehicleModel,
								beginTime: startTime, //开始时间
								endTime: endTime, //结束时间
								priceType: this.formdata.priceType, //阶梯计费类型
								price: this.formdata.price, //凌晨服务的价格
							}

							break;
						case '等候费':
							params = {
								btype: '2',
								vehicleModel: this.formdata.vehicleModel,
								waitTime: this.formdata.waitTime, //免费等候时间
								waitPrice: this.formdata.waitPrice, //超出时间收费价格
							}
							break;
					}
					if (this.editing == '1') {
						// 添加提交
						// this.formdata.bid = ''
						this.$http.vehicleApi.addBillingRules(params).then(res => {
							if (res.data.code == 200) {
								this.$message.success('添加成功')
								// 添加成功后 清空对应表单的内容
								// this.resetForm('formdata')
								// this.resetForm('stepChargingForm')
								this.cread1()
							}
							this.loading = false
						})
					} else {

						// 编辑提交
						params.addr = JSON.stringify(params.addr)
						params.bid = this.formdata.bid
						if (params.type == 1) {

							params.beginTime = '1988-01-01 ' + params.beginTime
							params.endTime = '1988-01-01 ' + params.endTime
						}
						this.$http.vehicleApi.modifyBillRulesByBid(params).then(res => {
							if (res.data.code == 200) {
								this.$message.success('修改成功')
								// this.resetForm('formdata')
								// this.resetForm('stepChargingForm')
								this.cread1()
							}
							this.loading = false
						})


					}
					this.visibleBasicBox = false
				} else {
					console.log('请填写完整信息');
					this.loading = false
					return false;
				}
			});

		},
		// 记录滚动距离
		scrollEvent(res) {
			switch (this.radioValue) {
				case '基本费用':
					this.$route.meta.scrollTop1 = res.target.scrollTop
					break;
				case '凌晨服务费':
					this.$route.meta.scrollTop2 = res.target.scrollTop
					break;
				case '等候费':
					this.$route.meta.scrollTop3 = res.target.scrollTop
					break;
			}
		},
		// 获取已选择过的城市地区  去禁用对应选项
		getSelectedCityData() {
			this.$http.basicSettingApi.getSelectedCity({ vehicleModel: this.formdata.vehicleModel }).then(res => {
				console.log('已选的', res);
				if (res.data.code) {

				}
			})
		}



	},
	created() {
		
		this.cread()
		this.getSelectedCityData()
	
		this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
	},
	mounted() {
		this.cityArrData = newCity //存储中国三级地区地址数据
		
	
	},
	components: {
		Breadcrumb
	},
	activated() {
		//组件激活时监听表格滚动条位置,
		this.$refs.table.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
		// 激活设置滚动位置
		switch (this.radioValue) {
			case '基本费用':
				this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop1
				break;
			case '凌晨服务费':
				this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop2
				break;
			case '等候费':
				this.$refs.table.bodyWrapper.scrollTop = this.$route.meta.scrollTop3
				break;
		}

	},
	beforeRouteLeave(to, from, next) {
		// 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
		this.$refs.table.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
		next()
	},

}
</script>

<style lang="scss" scoped>
.box {
	height: 100%;
	display: flex;
	height: calc(100vh - 127px);

	.left {
		width: 234.2px;
		height: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		overflow-y: scroll;
	}

	.left::-webkit-scrollbar {
		display: none;
		/* Chrome Safari */
	}

	.left {
		scrollbar-width: none;
		/* firefox */
		-ms-overflow-style: none;
		/* IE 10+ */
		overflow-x: hidden;
		overflow-y: auto;
	}

	.selectBox {
		margin-top: 28px;
	}

	.selectItem {
		width: 184px;
		background-color: #fff;
		height: 88px;
		cursor: pointer;
		transition: 0.2s;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-left: #fff 2.5px solid;
		transition: 0.2s;

		&:hover {
			border-left: #1890FF 2.5px solid;
			background-color: #F5F5F5;
		}
	}

	.selectItem1 {
		width: 184px;
		background-color: #F5F5F5;
		height: 88px;
		cursor: pointer;
		transition: 0.2s;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-left: #1890FF 2.5px solid;
	}

	.carPic {
		width: 93px;
		height: 40px;
		margin-bottom: 10px;
	}

	.text {
		color: #262626;
		font-size: 12px;
		transition: 0.2s;
	}


	.right {
		flex: 1;

		height: 100%;
		background-color: #fff;
		padding: 35px 16px 0 16px;



		.title {
			color: #262626;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 24px;
		}

		.controlBox {
			display: flex;
			justify-content: space-between;
			margin-bottom: 24px;

			.ButtonGroup {
				::v-deep .el-radio-button__inner {
					font-size: 12px;
					color: #262626;
					padding: 9.1px 20px;

				}

				::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
					background-color: #fff !important;
					color: #1890FF;
					font-size: 12px;
				}
			}

			.controlRight {
				display: flex;

				.searchInputBox {
					width: 209px;
					height: 32px;
					margin-right: 10px;

					.searchInput {
						width: 169px;
						height: 32px;
						line-height: 32px;
						border: 1px solid #DCDFE6;
						border-right: none;
						padding: 0 15px;

						&:focus {
							border-right: none;
							border: 1px solid #1890FF;
						}
					}

					.searchBtn {
						background-color: #1890FF;
						cursor: pointer;
						width: 40px;
						height: 32px;
						border-radius: 0 4px 4px 0;
						transition: 0.2s;
						position: relative;
						top: 1px;

						.iconStyle {
							color: #fff;
							font-size: 15px;
						}

						&:hover {
							opacity: 0.8;
						}
					}
				}

				.addBtn {
					background-color: #1890ff;
					border-radius: 4px;
					height: 32px;
					color: #ffffff;
					font-size: 12px;
					padding: 8px 17px 9px 17px;
					transition: 0.2s;
					cursor: pointer;
					margin-right: 10px;

					.iconBtn {
						margin-right: 7px;
						font-size: 15px;
					}

					&:hover {
						opacity: 0.8;
					}
				}
			}



		}

		// 切换区域
		.changeArea {
			position: relative;
			height: calc(100% - 100px);

			.paginationBox {
				position: absolute;
				bottom: 0;
				padding: 0 34px;
				width: 100%;
				border: 1px solid #f0f0f0;
				background-color: #fff;
				display: flex;
				height: 48px;
				align-items: center;

				.pagination {
					margin-left: auto;
				}
			}

			.list {
				position: absolute;
				width: 100%;



				::v-deep .el-table__body-wrapper {
					height: calc(100vh - 357px);
					overflow-y: scroll;
				}

				// 表头样式

				::v-deep .el-table__header th {
					background-color: #f0f6fd;
					color: #262626;
					font-size: 12px;
					font-weight: bold;
					text-align: center;
					height: 48px;
					padding: 0;

				}



				.stateBtns {
					height: 30px;

					::v-deep .el-button {
						font-size: 12px;
						border: none;
						width: 76px;
						height: 30px;
						margin: 0 auto;
						box-sizing: border-box;
					}

					.icon-dian {
						font-size: 12px;
					}
				}
			}
		}


	}
}

.dialog {
	::v-deep .el-form-item__content {
		line-height: 0;
	}

	::v-deep .el-dialog__header {
		border-bottom: 1px solid #f0f0f0;
		padding: 15px 20px;
		color: #262626;
		font-size: 14px;
		font-weight: bold;
		height: 50px;
	}

	::v-deep .el-dialog__title {
		font-size: 14px;
		color: #303133;
		font-weight: bold;
	}

	.discountTable {
		width: 616px;

		::v-deep .el-form-item__error {
			z-index: 10000;
			position: absolute;
			top: 70%;
		}

		::v-deep .el-form-item__content {
			height: 80px;
			display: flex;
			align-items: center;
		}

		.qujianStyle {
			display: flex;
			align-items: center;
		}

		.tableInputStyle {


			.suffixText {
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #CCCCCC;
				text-align: center;
				line-height: 40px;

				padding-right: 10px;
			}
		}

		.suffixText {
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #CCCCCC;
			text-align: center;
			line-height: 32px;
			padding-right: 10px;
		}





		.commonStyle {
			font-size: 19px;
			cursor: pointer;
			transition: 0.2s;

			&:hover {
				opacity: 0.8;
			}
		}
	}

	.redDian {
		::v-deep .el-form-item__label:before {
			content: "*";
			color: #f56c6c;
			margin-right: 4px;
		}
	}


	.commonStyle {
		font-size: 19px;
		cursor: pointer;
		transition: 0.2s;

		&:hover {
			opacity: 0.8;
		}
	}

	.beforeRedDian:before {
		content: "*";
		color: #f56c6c;
		margin-right: 4px;
	}

	.icon-xiaoyudengyu {
		font-size: 12px;
		margin-left: 4px
	}



	//   表格
	::v-deep .el-form-item__label {
		line-height: 32px;
		font-size: 12px;
		color: #262626;
		padding-top: 4px;
		width: 100%;
	}
}
</style>
<style lang = "scss">
.tableRowStyleName {
	height: 80px;
	color: #262626 !important;
	font-size: 12px;
	padding: 20px 0 !important;

}
</style>